
@extends('Admin.common.header')

<!-- 1.添加meta csrf_token -->
<meta name="csrf-token" content="{{ csrf_token() }}" />
<script src=" {{ asset('/js/jquery-1.8.3.min.js') }} "></script>
<script>
	
	<!-- 2.设置全局ajax选项 -->
	$.ajaxSetup({
		headers: {
			'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		}
	});
	// 获取 token
	var _token = $('meta[name="csrf-token"]').attr('content');
	
	
	// 获取父类相对应的子类列表 
	// 参数：id值 id = 'category_1'
	var i=2;
	function getSonCategory( id ){
		// 将当前下拉框 以下的其他下拉框 全部清除
		$("#"+id).nextAll().remove();
		// 获取当前选择的分类id		
		var category_id	=	$("#"+id).val();	
		// 0代表根类 没有选择子类 
		if( category_id==0 ){					
			return false;
		}
		// 按'_'分割 获取字母部分 category
		var arr=id.split('_'); 	
		// 给 下一级 下拉框 新的id名( category_2 )
		var new_id= arr[0]+'_'+i;	
		// 获取相对应的子类列表 
		$.ajax({
			type:"post",
			url:"{{ url('/category/getSonCategory') }}",
			data:{category_id:category_id,new_id:new_id,_token:_token},
			async:false,    						
			dataType:"html",
			success:function(back){
				if( back!='' ){
					// 同辈后追加
					$('#'+id).after(back);
					i++;
				}
			}
		});
	}
	
	
	
	$(function(){
		
		// 一进入页面就找一级分类下的子分类
		getSonCategory('category_1');
		
		// 上传图片按钮 文件名显示
		$("#upFiles").on("change", function(){
			var str = '';
			$("#fileName").html(str);
			$(".picShow").html(str);
			// 原生js
			var obj = document.getElementById("upFiles");
			// 获取文件个数
			var length = obj.files.length;
			for( var i=0;i<length;i++ ){
				// 获取文件名
				var tempName = obj.files[i].name;
				str += tempName + "\n";
			}
			// 预览图片
			$("#fileName").append(str);
		});	

		
		// 商品编辑时 获取sku
		var sku = $("#pic_edit").attr('sku');
		
		// 执行 创建 编辑 商品
		$("button").click(function(){
			// 声明 表单对象
			var formData = new FormData();
			// 获取 文件个数
			var length = $("#upFiles")[0].files.length;
			for( var i=0;i<length;i++ ){
				// 必须写这个 控制器才能获取到文件内容
				// 分别获取 每个文件信息
				formData.append( "file"+i,$("#upFiles")[0].files[i] );
			}
			// token
			formData.append("_token",_token);
			
			// 定义 接收分类数组
			var category = [];	
			// 定义下标 
			var num=1;	
			// 获取每个下拉框的选中值			
			$("select option:selected").each(function(){
				var category_id= $(this).val();
				category[num] = parseInt(category_id);
				num++;
				
			});	
			num=1;
			// 商品分类
			formData.append("category",category);
			
			// 商品名
			var name	=	$("input[name='name']").val();
			formData.append("name",name);
			
			// 描述
			var description	=	$("textarea[name='description']").val();
			formData.append("description",description);
			
			if( sku )
			{
				// 编辑
				var url = "{{ url('/com/doCreate') }}"+'/'+sku;
			}else
			{
				// 创建
				var url = "{{ url('/com/doCreate') }}";
				// 进价
				var inPrice	=	$("input[name='inPrice']").val();
				formData.append("inPrice",inPrice);
				// 售价
				var price	=	$("input[name='price']").val();
				formData.append("price",price);
				// 库存
				var stock	=	$("input[name='stock']").val();
				formData.append("stock",stock);
			}
			
			$.ajax({ 
				type : 'post', 
				url : url, 
				data : formData, 
				async:true,    					
				dataType:"json",
				// 告诉jQuery不要去处理发送的数据
				processData : false, 
				// 告诉jQuery不要去设置Content-Type请求头
				contentType : false,
				beforeSend:function(){
					console.log("正在进行，请稍候");
				},
				success : function(back) { 
					// 2.模态框 不要动
					$('#show_info').html( '' );
					$('#show_info').html( back['show_info'] );
					location.reload();
				}
			});
			
		});
	});
</script>
<body style="background-color:#7A7A7A;">


<div style="margin-top:100px;color:#FFFFFF;width:98%;margin-bottom:70px;" class="form-horizontal">
	
	
	<!-- 页面标记  -->
	<h3 style='color:white;margin-left:127px;margin-top:-30px;color:#D1EEEE' >	  
		@if( isset($com_info->id) )
			编辑商品
		@else
			添加商品
		@endif
	</h3>
	
	<br/>
	
	
	<!-- 商品添加表单  -->
	<!-- 选择分类 -->
	<div  class="form-group">
		<label class="col-sm-2 control-label">选择分类</label>
		<div class="col-sm-10">
			
			
			<!-- 编辑商品 -->
			@if( isset($com_info->id) )
				
				<!-- 遍历所有层级 依次选中 例:1,2,3,4 
				$category_info
				1 => array:2 [▼
					"category_name" => "汽车"
					"id" => 1
				  ] -->
				@forelse( $category_path as $key => $category_info )
					<!-- 第一个分类下拉框 -->
					@if( $key==1 )
						<select style="width:auto;float:left;" class="form-control" id="category_{{ $key }}" onchange="getSonCategory('category_{{ $key }}');"  >
						<!-- 遍历所有一级分类 -->
						@forelse( $all_first_category as $category )
							@if( $category_info['id']==$category->id )
								<!--第一级分类先选中 -->
								<option value="{{ $category->id }}" selected >
									{{ $category->name }}
								</option>
							@else
								<option value="{{ $category->id }}" >
									{{ $category->name }}
								</option>
							@endif
						@empty
						@endforelse
						</select>
					@else
					<!-- 第二个及以后分类下拉框 -->
					<script type='text/javascript'>
						$(function(){
							var id = {{ $key }};
							var cid = {{ $category_info['id'] }};
							// ajax必须同步才可以选中 异步会选不中
							$( "#category_"+id ).val(cid);
							getSonCategory("category_"+id);
						}); 
					</script>
					@endif
				@empty
				@endforelse
			
			@else
				<!-- 创建商品 -->
				<select style="width:auto;float:left;" class="form-control" id="category_1" onchange="getSonCategory('category_1');"  >
					<option value="0" >1级分类</option>
					@forelse ($all_first_category as $category)
						<option value="{{ $category->id }}" >{{ $category->name }}</option>
					@empty
					@endforelse
				</select>
			@endif
		</div>
	</div>
	
	
	<!-- 商品名称 -->
	<div  class="form-group">
	  <label class="col-sm-2 control-label">商品名称</label>
	  <div class="col-sm-10">
	    <input style="width:300px;" type="text" name="name" value="{{ $com_info->name or '' }}" class="form-control" placeholder="商品名称">
	  </div>
	</div>
	
	<!-- 添加多张图片 -->
	<div  class="form-group">
		<label class="col-sm-2 control-label">添加图片</label>
		<div class="col-sm-10" style="background:url({{ asset('/images/upload.jpg')}} );background-size:50px;width:50px;height:50px;margin-left:15px;border-radius:360px;">
			<input type="file" style="width:50px;height:50px; margin-left:-15px;opacity:0;cursor:pointer;"  name="imgs" id="upFiles"  multiple />
		</div>
		<div style="float:left;width:200px;height:auto;word-wrap: break-word;margin-left:10px;" id="fileName">
		</div>
	</div>
	<!-- 图片展示区域 -->
	<div class="picShow" style='margin-left:212px;width:450px;'  >
		@if( isset($pic_info) )
			@forelse ($pic_info as $pic)
				<img style='width:120px;margin-right:20px;margin-top:5px;margin-bottom:10px;border-radius:5px;' src="{{ asset('/images/coms') }}/{{ $pic->pic_url }}" />
			@empty
			@endforelse
		@else
		@endif
	</div>
	
	@if( isset($com_info->id) )
		<!-- 编辑商品时 不让编辑 成本 售价 库存 -->
	@else
	<!-- 创建 -->
	<!-- 成本价 -->
	<div  class="form-group">
		<label class="col-sm-2 control-label">成本价</label>
		<div class="col-sm-10">
			<input style="width:300px;" type="text" name="inPrice" value="{{ $com_info->inPrice or '' }}" class="form-control" placeholder="成本价">
		</div>
	</div>
	
	<!-- 售价 -->
	<div  class="form-group" style="margin-top:10px;">
		<label class="col-sm-2 control-label">售价</label>
		<div class="col-sm-10">
			<input style="width:300px;" type="text" name="price" value="{{ $com_info->price or '' }}" class="form-control" placeholder="售价">
		</div>
	</div>
	
	<!-- 库存 -->
	<div  class="form-group">
		<label class="col-sm-2 control-label">库存</label>
		<div class="col-sm-10">
			<input style="width:300px;" type="text" name="stock" value="{{ $com_info->stock or '' }}" class="form-control" placeholder="库存">
		</div>
	</div>
	@endif
	
	<!-- 商品介绍 -->
	<div  class="form-group">
		<label class="col-sm-2 control-label">商品介绍</label>
		<div class="col-sm-10">
			<textarea name="description" style='height:90px;width:300px;' class="form-control" placeholder="商品介绍" >{{ $com_info->description or '' }}</textarea>
		</div>
	</div>
	
	<!-- 背景图片 -->
	<div style="position:absolute;left:720px;top:140px;">
		<img src="{{ asset('./images/logo.png') }}" alt="">
	</div>
	
	<!-- 1.模态框 不要动 -->
	<button  style="width:380px;;margin-left:140px;" data-toggle="modal" data-target=".bs-example-modal-sm" class="btn btn-danger">
		@if ( isset($com_info->id) )
			编辑
		@else
			添加
		@endif
	</button>
	
	<div  class="form-group" style="margin-top:20px;">
		<a href="{{ url('/com/index') }}" style="width:380px;margin-left:155px;" class="btn btn-success">
			列表
		</a>
	</div>
	
	<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
		<div class="modal-dialog modal-sm" role="document" id='show_info'  style="margin-top:80px;margin-left:600px;">
		</div>
	</div>
</div>

<br/><br/><br/>
<br/><br/><br/>

<!-- 商品编辑时 找个地 放图片字符串 -->
<div id="pic_edit" sku="{{ $com_info->id or '' }}" ></div>


</body>
@extends('Admin.common.footer')